import React from 'react';
import { StyleSheet, Text, View, Image, ImageBackground  } from 'react-native';
import { StackNavigator } from 'react-navigation';
import FormInput from './component/formInput';
import LoginSuccess from './component/loginSuccess';


export default class App extends React.Component {
  render() {
    return (
      <LoginApp />
    );
  }
}


class LoginPage extends React.Component {
  render() {
    return (
              <ImageBackground  source={require('./assets/img/blueBg.png')} style={styles.backgroundImage} >
                <View style={styles.logoContainerWrap}>
                    <View style={styles.logoContainer}>
                      <Image source={require('./assets/img/logo.png')} />
                      <Image source={require('./assets/img/ixike.png')} />
                    </View>
                    <View style={styles.formInputWrap}>
                      <FormInput sendProps={this.props}/>
                    </View>
                </View>
              </ImageBackground >
 
    )
  }
}

const LoginApp = StackNavigator({
      Login: { screen: LoginPage },
      Home: { screen: LoginSuccess}
    },{
      headerMode: 'none',
      mode: 'modal'
    }
  );

const styles = StyleSheet.create({
   backgroundImage: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor:'rgba(0,0,0,0)'
  },
  logoContainerWrap: {
    flex: 1,
    flexDirection: 'column'
  },
  logoContainer: {
    marginTop: 60,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'

  },
  formInputWrap: {
    borderRadius: 10,
    padding: 22,
    width: 305,
    height: 340,
    backgroundColor:'rgba(255,255,255,255)',
    marginTop:140,
    shadowOffset: {width:0 ,height: 0},
    elevation: 20
  }
});
